{% extends "layout/_layout_admin.html" %}

{% block style %}
    <style>
        /*点击更多弹出框样式*/
        .more-btn:hover .more-box{
            display: block;
        }
        .more-box{
            position: absolute;
            right: 20px;
            top: 61px;
            width: 140px;
            background-color: #fff;
            z-index: 100;
            border: medium none;
            border-radius: 3px;
            box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
            display: none;
        }
        .more-box-li{
            cursor: pointer;
        }
        .more-box-li:hover{
            color: #262626;
            background-color: #f5f5f5;
        }
        .more-box-li>span{
            display: block;
            padding: 6px 20px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: inherit;
            white-space: nowrap;
            border-radius: 3px;
            margin: 4px;
            text-align: left;
        }
    </style>
{% endblock %}

{% block content %}
    <div style="padding-top: 10px;" id="content">
    <!--table 表格-->
    <div class="float-clear">
        <div class="float-left contentBox border-all" style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>公司信息</span>
            </div>
            <div class="content-center">
                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                <ul id="myTree" class="ztree"></ul>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;">
            <div class="content-title border-bottom">
                <span>{{leftTreeName}} - 用户信息</span>
            </div>
            <div class="content-center">
                <button class="btn btn-default pull-right my-btn my-btn-more more-btn">更多
                    <!--点击更多弹出框-->
                    <div class="more-box">
                        <div class="more-box-li" onclick="disableClick()">
                            <span>禁用账户</span>
                        </div>
                        <div class="more-box-li" onclick="enableClick()">
                            <span>启用账户</span>
                        </div>
                        <div class="more-box-li">
                            <span>设置密码</span>
                        </div>
                        <div class="more-box-li">
                            <span>功能授权</span>
                        </div>
                        <div class="more-box-li">
                            <span>数据授权</span>
                        </div>
                        <div class="more-box-li">
                            <span>关联信息</span>
                        </div>
                    </div>
                </button>
                <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
                <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 39px;">查询</button>
                <table id="table"
                       data-toggle="table"
                       data-toolbar=".toolbar"
                       data-show-export="true"
                       data-pagination="true"
                       data-maintain-selected="true"
                       data-search="true"
                       data-show-refresh="true"
                       data-search-align="left"
                       data-toolbar-align="right">
                    <thead>
                    <tr>
                        <th data-field="code"></th>
                        <th data-field="name">账户</th>
                        <th data-field="url">姓名</th>
                        <th data-field="target">性别</th>
                        <th data-field="target">手机</th>
                        <th data-field="target">部门</th>
                        <th data-field="status" data-formatter="checkBoxFormatter">状态</th>
                        <th data-field="description">描述</th>
                        <th class="col-lg-2" data-formatter="operateFormatter" data-events="actionEvents">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--添加 编辑 模态框-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}账号</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>账号<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入账号" v-model="modalData.code">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>密码<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入密码"
                               v-model="modalData.name">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>姓名<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" v-model="modalData.username"
                               placeholder="请输入姓名">
                        <!--<ul id="modalZTree" class="ztree modalZTree border-all"></ul>-->
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>部门<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0;">
                            <option value="===请选择===">===请选择===</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>工号：</span>
                        </div>
                        <input type="text" class="form-control form-manage"  placeholder="请输入工号" v-model="modalData.job_number">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>性别：</span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0;">
                            <option value="===请选择===">===请选择===</option>
                            <option value="女">女</option>
                            <option value="男">男</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>权限：</span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0;">
                            <option value="===请选择===">===请选择===</option>
                            <option value="1">权限1</option>
                            <option value="2">权限2</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>手机：</span>
                        </div>
                        <input type="text" class="form-control form-manage"  placeholder="请输入手机" v-model="modalData.phone_number">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>邮箱：</span>
                        </div>
                        <input type="text" class="form-control form-manage"  placeholder="请输入邮箱" v-model="modalData.email">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>备注：</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none" v-model="modalData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left;">温馨提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <img src="static/image/delete.png" alt="" style="float: left;margin-left: 20px">
                    <h3 class="text-center" style="float: left;margin-top: 57px;margin-left: 40px">{{staticModalType}}</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="staticRemoveClick()">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="staticOkClick()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
{% endblock %}

{% block script %}
    <script>
    //Vue 实例化
    var vm = new Vue({
        el: '#content',
        data: {
            leftTreeLoading:true,                //左侧树结构加载判断
            leftTreeList:[],                     //左侧树结构值
            leftTreeName:"模块列表",              //点击左侧树结构获取到的值
            modalDataParentName:'',              //模态中选定树的名称
            modalType:'添加',                    //模态框修改的类型 添加|编辑
            staticModalType:'',                 //删除等功能模态中的提示信息
            staticModal:false,                  //功能模态框确定是否被点击
            tableLineData:null,                 //table中行被选中中的数据
            modalData:{                         //模态输入框中的值
                code:'',                        //账号
                username:'',                    //名称
                description:'',                 //描述
            },
        },
        methods: {
            //选择模态 菜单 状态
            changeCheck:function (item) {
                item = !item;
            }
        }
    });
    //功能模态确认按钮被点击
    function staticOkClick() {
        vm.taticModal = true;
    }
    //左侧zTree配置
    var setting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: leftZTreeClick
        }
    };
    //获取zTree信息 并且绘制
    function getLeftZTree() {
        vm.leftTreeLoading = true;
        $.ajax({
            //TODO:功能授权完成
            url: 'http://172.16.200.252:8080/core/module/get_tree/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.leftTreeLoading = false;
                    vm.leftTreeList = response.data;
                    //TODO:左侧树选定值以后 绘制第一个选项中的表格数据
                    //绘制zTree树
                    renderZTree();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
                vm.leftTreeLoading = false;
            }
        });
    }

    // 左侧zTree点击事件
    function leftZTreeClick(event, treeId, treeNode, clickFlag) {
        //TODO:左侧树选定值以后 绘制选项中的表格数据

        vm.leftTreeName = treeNode.name;
    }

    //模态zTree调用
    var modalSetting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: modalZTreeClick
        }
    };

    //列表模态中选择类型 触发zTree
    function modalZTreeClick(event, treeId, treeNode, clickFlag) {
        //为 modalData.parent 赋值
        vm.modalDataParentName = treeNode.name;
        vm.modalData.parent = treeNode.id;
    }

    //列表模态中选择 '上级' 点击  触发树结构
    $('#company').click(function () {
        $("#modalZTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });

    //点击除模态中的zTree外 关闭zTree
    function onBodyDown(event) {
        if (!(event.target.id == "company" || event.target.id == "modalZTree" || $(event.target).parents("#modalZTree").length > 0)) {
            $("#modalZTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }

    //添加按钮被点击
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalData = {code:'',name:'',parent:0,description:'',target:'',icon:'',url:'',dis_order:null,is_menu:false,is_expand:false,is_public:false,status:true};
        vm.modalType = "添加";
        $("#modal").modal('show');
    }

    //禁用账户被点击
    function disableClick() {
        if(!vm.tableLineData){
            toastr.info('您没有选中任何数据项,请选中后再操作！');
            return;
        }
        staticModalShow('是否禁用账户')
            .then(function(response){
                if(response){
                    console.log('调用禁用');
                }
            })
    }
    //启用账户被点击
    function enableClick() {
        staticModalShow('是否启用账户')
            .then(function(response){
                if(response){
                    console.log('调用启用');
                }
            })
    }

    var $table = $("#table");
    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r,row,element){
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.tableLineData = row;
    });

    //为列表添加按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfedit btn btn-primary  btn-sm" style="margin-right:15px;">编辑</button>',
            '<button type="button" class="RoleOfdelete btn btn-primary  btn-sm" style="margin-right:15px;">删除</button>'
        ].join('');
    }
    //为按钮列表添加事件
    window.actionEvents = {
        //添加编辑事件
        'click .RoleOfedit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = copyFun(row);
            vm.modalType = "编辑";
            $("#modal").modal('show');
        },
        //添加删除事件
        'click .RoleOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = copyFun(row);
            $("#deleteModal").modal('show');
        }
    };
    //为列表添加checkBox样式
    function checkBoxFormatter(value, row, index) {
        if(value){
            return [
                '<div class="normalBox">正常</div>'
            ].join('');
        }else{
            return [
                '<div class="abnormal">禁用</div>'
            ].join('');
        }
    }

    //模态确认按钮点击事件
    function add() {
        if(!vm.modalData.code){toastr.info('编号不能为空!');return}
        if(!vm.modalData.name){toastr.info('名称不能为空!');return}
        if(!vm.modalData.target){toastr.info('目标不能为空!');return}
        if(!vm.modalData.dis_order){toastr.info('排序不能为空!');return}
        //将模态中的数据深度克隆一份 防止旧值被修改
        var newModalData = Object.assign({},vm.modalData);
        //checkBox 将true false 转换为 0 1
        vm.modalData.is_menu?newModalData.is_menu = 0:newModalData.is_menu = 1;  //菜单
        vm.modalData.is_expand?newModalData.is_expand = 0:newModalData.is_expand = 1; //展开
        vm.modalData.is_public?newModalData.is_public = 0:newModalData.is_public = 1;     //是否公开
        vm.modalData.status?newModalData.status = 0:newModalData.status = 1;      //当前状态
        if(vm.modalType=="添加"){
            $.ajax({
                url: 'http://172.16.200.252:8080/core/module/add/',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //获取zTree信息 并且绘制
                        getLeftZTree();
                        toastr.success('添加成功')
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else{
            $.ajax({
                url: 'http://172.16.200.252:8080/core/module/edit/',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //获取zTree信息 并且绘制
                        getLeftZTree();
                        toastr.success('编辑成功')
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    };
    //删除表格中一项
    function deleteTable(){
        $.ajax({
            url: 'http://172.16.200.252:8080/core/module/del/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id:vm.modalData.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $("#deleteModal").modal('hide');
                    //获取zTree信息 并且绘制
                    getLeftZTree();
                    toastr.success('删除成功')
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //绘制zTree树 方法
    function renderZTree() {
        $.fn.zTree.init($("#modalZTree"), modalSetting,vm.leftTreeList);
        $.fn.zTree.init($("#myTree"), setting, vm.leftTreeList);
    }


    //dom渲染完成后加载
    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //获取zTree信息 并且绘制
        getLeftZTree();
    });
</script>
{% endblock %}